(function (window) {
	'use strict';

	/*
		todoMvc的功能需求：
			* 渲染数据到任务列表
			* 输入内容回车创建任务
			* 点击复选框可以：完成任务
			* 全选、不选和反选
			* 双击编辑任务项
			* 删除任务
			* 统计未完成的条数
			* 切换状态：数据进行切换（路由）
			* 清除所有的已完成任务
			* 数据本地存储
	*/

	// Your starting point. Enjoy the ride!
	let storage = {
		getItem() {
			let res = localStorage.getItem('taskList'); //取出来的值是字符串
			if (res) {
				res = JSON.parse(res); //把字符串转成对象
			} else {
				res = [];
			}
			return res;
		},
		setItem(data) {
			console.log('存数据成功')
			localStorage.setItem('taskList', JSON.stringify(data)); //把传入的对象转成字符串，再存到本地存储中
		}
	}

	// let taskList = [{
	// 	id: 1,
	// 	title: '今天吃辣子鸡',
	// 	ischeck: false //未完成
	// }, {
	// 	id: 2,
	// 	title: '准备帮表弟填写志愿',
	// 	ischeck: true //已完成
	// }, {
	// 	id: 3,
	// 	title: '学生放暑假啦',
	// 	ischeck: false
	// }];
	// storage.setItem(taskList);//先把旧的数据存到本地

	let vm = new Vue({
		el: '.todoapp', //设置挂载点
		data: {
			//渲染数据到任务列表
			// taskList : [
			// 	{
			// 		id : 1,
			// 		title : '今天吃辣子鸡',
			// 		ischeck : false //未完成
			// 	},{
			// 		id : 2,
			// 		title : '准备帮表弟填写志愿',
			// 		ischeck : true //已完成
			// 	},{
			// 		id : 3,
			// 		title : '学生放暑假啦',
			// 		ischeck : false
			// 	}],
			taskList: storage.getItem(),
			msg: '',
			currenIndex: null,
			hash: '' //存放哈希改变的状态的
		},
		//存放方法
		methods: {
			//功能：输入内容回车创建任务
			add() {
				// alert('回车了')
				console.log(this.msg, 666);
				let task = { //构造一个对象
					id: this.taskList.length + 1,
					title: this.msg,
					ischeck: false
				}
				this.taskList.push(task); //把新的数据插入到数组的末尾
				this.msg = ''; //添加完成后，清空表单
			},

			//功能：双击编辑任务项
			edit(index) {
				console.log(index, 888);
				this.currenIndex = index;
			},

			//功能：双击编辑任务项
			keepItem(index) {
				console.log(index, '编辑的那一行');
				this.currenIndex = null;
				if (!this.taskList[index].title) {
					//如果数据为空
					this.taskList.splice(index, 1); //从下标index起删除1行
				}
			},

			//功能：点击删除某一行任务
			deleteItem(index) {
				let istrue = confirm('您确定不要我了吗？');
				if (istrue) {
					this.taskList.splice(index, 1); //从下标index起删除1行
				}
			},

			//功能：删除所有已完成任务
			removeAll() {
				let istrue = confirm('您确定所有已完成的任务列表吗？');
				if (istrue) {
					this.taskList = this.taskList.filter(item => item.ischeck == false);
				}

			}
		},
		//计算属性
		computed: {
			//功能：全选、不选和反选
			allCheck: {
				get() { //设置：下方的复选框如果都选中，则全选按钮就高亮，只要有一个不选中，全选按钮就不高亮。下方->上方
					return this.taskList.every(item => item.ischeck == true);
				},
				set(val) { //获取：获取全选按钮的状态，反向控制下方所有的复选框。上方->下方
					console.log(val, 999)
					this.taskList.forEach(item => {
						item.ischeck = val;
					})
				}
			},

			//功能：统计未完成任务的条数
			total() {
				return this.taskList.filter(item => item.ischeck == false).length;
			},

			//功能：通过哈希值的状态变化，把页面的数据更新：切换状态：数据进行切换（路由）
			filterTask() {
				switch (this.hash) {
					case 'all':
						return this.taskList;
						break;
					case 'active':
						return this.taskList.filter(item => item.ischeck == false);
						break;
					case 'completed':
						return this.taskList.filter(item => item.ischeck == true);
						break;
				}
			}
		},

		//监听器
		watch : {
			//这种写法只能监听到数组的最外层数据的变化，里面数据的变化就监听不到了，我们要进行深度监听
			// taskList(newval) {
			// 	console.log('改了数据了');
			// }
			taskList : {
				deep : true,//深度监听
				handler(newval) {
					console.log('改了数据了');
					storage.setItem(this.taskList);
				}
			}
		},
		//局部指令注册
		directives : {
			'focus' : {
				inserted(el) {
					el.focus();//页面渲染成功就自动聚焦
				}
			},
			'focus2' : {
				update(el) {
					el.focus();
				}
			}
		}
	});

	//切换状态：数据进行切换（路由）
	window.onhashchange = function () {
		//如果页面的hash哈希发生改变，就会触发这个功能
		let hash = location.hash.slice(2); //abcd  => cd
		console.log(hash, '哈希值');
		vm.hash = hash;
	}

	//刚进入页面就马上调取这个函数，获取哈希值
	window.onhashchange();
})(window);
